<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>mstation - a cloud bookmark and playlist of music ,film ect. </title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="css/bootstrap.css" rel="stylesheet">
    <style type="text/css">
      body {
        padding-top: 60px;
        padding-bottom: 40px;
      }
      .sidebar-nav {
        padding: 9px 0;
      }
      
	.form-horizontal .control-label {
	  float: left;
	  width: 160px;
	  padding-top: 5px;
	  padding-left:15px;
	  text-align: left;
	}      
    </style>
    <link href="css/bootstrap-responsive.css" rel="stylesheet">

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <!-- Fav and touch icons -->
    <link rel="shortcut icon" href="http://twitter.github.com/bootstrap/assets/ico/favicon.ico">
    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-144-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-114-precomposed.png">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-72-precomposed.png">
    <link rel="apple-touch-icon-precomposed" href="http://twitter.github.com/bootstrap/assets/ico/apple-touch-icon-57-precomposed.png">
  </head>

  <body>

    <div class="navbar navbar-inverse navbar-fixed-top" style="display: none;">
      <div class="navbar-inner">
        <div class="container-fluid">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse collapse">
            <p class="navbar-text pull-right">
              Logged in as <a href="#" class="navbar-link">Username</a>
            </p>
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container-fluid">
      <div class="row-fluid">
        <div class="span3">
          <div class="well sidebar-nav">
            <ul class="nav nav-list">
              <li class="nav-header"></li>
              <li class=""><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li><a href="#"></a></li>
              <li class="nav-header"></li>
              <li><a href="#"></a></li>

            </ul>
          </div><!--/.well -->
        </div><!--/span-->
        
        <div class="span9">         
          <div class="row-fluid">
            <div class="span9">
              <h3>健診変換マスター設定</h3>
             <div>
				<ul class="nav nav-tabs" id="myTab">
					<li class="active"><a href="#kihon">変換基本属性</a></li>
					<li><a href="#headMapping">ヘッダー変換設定</a></li>
					<li><a href="#bodyMapping">ボディ変換設定</a></li>
					<li><a href="#footMapping">フッター変換設定</a></li>
				</ul>
				 
				<div class="tab-content">
					<div class="tab-pane active" id="kihon">
						<form class="form-horizontal">
						<div class="control-group">
							<label class="control-label" for="typeName">変換種別名称</label>
							<div class="controls">
								<input type="text" id="typeName" placeholder="例:標準CSVフォーマット">
							</div>
						</div>
						
						<div class="control-group">
							<label class="control-label" for="fileFormat">ファイルフォーマット</label>
							<div class="controls">
								<select id="fileFormat">
									<option value="1">CSV</option>
									<option value="2">XML</option>
								</select>
							</div>
						</div>	
						
						<div class="control-group">
							<label class="control-label" for="hasCsvHeader">CSVヘッダー有無</label>
							<div class="controls">
								<input id="hasCsvHeader" type="checkbox"> 
							</div>
						</div>							

					    <button type="submit" class="btn">保存</button>
					    </form>						
					
					</div>
					<div class="tab-pane" id="headMapping">
						<table class="table table-striped">
							<thead>
								<tr>
									<th>ＩＤ</th>
									<th>項目名称</th>
									<th>INPUT列ＮＯ</th>
									<th>ディフォルト値</th>
									<th>条件指定変換</th>
								</tr>
							</thead>
							<tbody>
								<tr>
									<td>1</td>
									<td>保険者番号</td>
									<td><input type="text" value="210"></input></td>
									<td><input type="text" value="">
									<td><button class="btn btn-small" type="button"　 data-toggle="modal" data-target="#myModal">条件指定</button></td>
								</tr>
								
								<tr>
									<td>2</td>
									<td>被保険者証等記号</td>
									<td><input type="text" value="1"></input></td>
									<td><input type="text" value=""></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>	
								
								<tr>
									<td>3</td>
									<td>被保険者証等番号</td>
									<td><input type="text" value="1"></input></td>
									<td><input type="text" value=""></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>	
								
								<tr>
									<td>4</td>
									<td>受診者の社員番号</td>
									<td><input type="text" value=""></input></td>
									<td><input type="text" value=""></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>
								
								<tr>
									<td>5</td>
									<td>受診者の続柄</td>
									<td><input type="text" value="5"></input></td>
									<td><input type="text" value="00"></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>	
								
								<tr>
									<td>6</td>
									<td>健診種別コード</td>
									<td><input type="text" value="11"></input></td>
									<td><input type="text" value=""></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>									
								
								<tr>
									<td>...</td>
									<td>...</td>
									<td><input type="text" value=""></input></td>
									<td><input type="text" value=""></input></td>
									<td><button class="btn btn-small" type="button">条件指定</button></td>
								</tr>																																								

							</tbody>
						</table>
					</div>
					<div class="tab-pane" id="bodyMapping">bodyMapping...</div>
					<div class="tab-pane" id="footMapping">footMapping...</div>
				</div>
			 </div>
            </div><!--/span-->
          </div><!--/row-->          


        </div><!--/span-->
        
      </div><!--/row-->



<!-- sample modal content -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h3 id="myModalLabel">Modal Heading</h3>
  </div>
  <div class="modal-body">
    <h4>Text in a modal</h4>
    <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem.</p>

    <h4>Popover in a modal</h4>
    <p>This <a href="#" role="button" class="btn popover-test" title="A Title" data-content="And here's some amazing content. It's very engaging. right?">button</a> should trigger a popover on click.</p>

    <h4>Tooltips in a modal</h4>
    <p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> should have tooltips on hover.</p>

    <hr>

    <h4>Overflowing text to show optional scrollbar</h4>
    <p>We set a fixed <code>max-height</code> on the <code>.modal-body</code>. Watch it overflow with all this extra lorem ipsum text we've included.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
    <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
    <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.</p>
    <p>Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

      <hr>

      <footer>
        <p>© Company 2012</p>
      </footer>

    </div><!--/.fluid-container-->
    
<script>


</script>    

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
	<script
		src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.8.2.min.js"><\/script>')</script>
	
    <script src="js/bootstrap.min.js"></script>  
    
    <script>
    
    $(function () {
    	//$('#myTab a:last').tab('show');
	   	$('#myTab a').click(function (e) {
	   	    e.preventDefault();
	   	    $(this).tab('show');
	   	});
    })
    
    </script>

</body></html>